<!-- 信息设备-接货人组件 -->
<template>
  <nut-popup position="bottom" round v-model:visible="props.showRound">
    <nut-picker :columns="columns" title="接货人" @confirm="confirm" @cancel="closeTimeModel"> </nut-picker>
  </nut-popup>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import Taro, { useDidShow } from '@tarojs/taro'
import dayjs from 'dayjs'

const props = defineProps<{
  showRound: boolean
}>()

const emit = defineEmits(['sendReceivePeopleMsg'])

const columns = ref([
  {
    text: '华南信息部 0591-83952371',
    value: '华南信息部 0591-83952371',
    name: '华南信息部',
    phone: '0591-83952371',
    tel: '17720761790'
  },
  {
    text: '前横路信息部 0591-83952371',
    value: '前横路信息部 0591-83952371',
    name: '前横路信息部',
    phone: '0591-83952371',
    tel: '17720761790'
  },
  {
    text: '闽南信息部 0591-83952371',
    value: '闽南信息部 0591-83952371',
    name: '闽南信息部',
    phone: '0591-83952371',
    tel: '17720761790'
  },
  {
    text: '华中信息部 0591-83952371',
    value: '华中信息部 0591-83952371',
    name: '华中信息部',
    phone: '0591-83952371',
    tel: '17720761790'
  }
])

// 关闭弹窗-确定
const confirm = ({ selectedValue, selectedOptions }) => {
  const [receiver, receiverMobile] = selectedOptions.map((val) => val.text).join(',').split(" ");
  const sendData = {
    receiver,
    receiverMobile
  }

  emit('sendReceivePeopleMsg', sendData) // 关闭弹窗传递数据
}

// 关闭弹窗-取消
const closeTimeModel = () => {
  emit('sendReceivePeopleMsg', null) // 关闭弹窗不传递数据
}
</script>

<style lang="scss">
.receiveBox {
  .nut-cell__title {
    color: #000;
  }
  .title {
    font-weight: bold;
  }

  .active {
    color: #000;
    background: #fff;
  }

  .nut-tabs__titles .nut-tabs__list {
    height: auto;
  }

  .nut-tabs.vertical .nut-tabs__titles.scrollable .nut-tabs__titles-item {
    padding: 20rpx;
    display: flex;
    flex-direction: column;
    /* 垂直方向排列 */
    justify-content: center;
    /* 垂直居中 */
    align-items: center;
    /* 水平居中 */
  }

  .nut-tabs.vertical .nut-tabs__titles.scroll-vertical {
    width: 250rpx;
  }

  .nut-tabs.vertical .nut-tabs__content .nut-tab-pane {
    text-align: center;
    margin: 0 auto;
  }

  .nut-radio__label {
    text-align: center;
  }

  .nut-radio-group {
    padding: 20rpx;
  }

  .nut-radio-group .nut-radio {
    width: 300rpx;
    height: 80rpx;
    line-height: 80rpx;
  }

  .btn {
    width: 702rpx;
    height: 88rpx;
    border-radius: 200rpx;
    background: #0966ff;
    color: #fff;
  }
}
</style>
